<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:100px;height: 100px;border: solid 10px black;}
  </style>
</head>
<body>
  <div class="box" style="background: red;color:#fff">
    这是一个盒
  </div>
</body>
<script>
  var box = document.querySelector(".box")

  console.log(box);
  console.log(box.style.background);

  // 无法获取非行内样式
  // console.log(box.style.width);

  // 获取非行内样式
  // console.log( getComputedStyle(box).width )
  // console.log( getComputedStyle(box).height )
  // console.log( getComputedStyle(box).border )
  // 也能获取行内样式
  // console.log( getComputedStyle(box).background )

  // 非行内样式操作，只能获取不能设置
  // getComputedStyle(box).width = "200px";





  // console.log( box.currentStyle )
  // console.log( getComputedStyle(box) )

  function getStyle(ele, attr){
    if( ele.currentStyle ){
      return ele.currentStyle[attr];
    }else{
      return getComputedStyle(ele)[attr];
    }
  }

  console.log(getStyle(box, "width"))
  console.log(getStyle(box, "height"))
  console.log(getStyle(box, "border"))



</script>
</html>